<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 400px;height: 300px;border: solid 1px black;margin: 0 auto;}
        .box ul{margin: 0;padding: 0;list-style: none;display: flex;height: 40px;line-height: 40px;text-align: center;border-bottom: solid 1px black}
        .box li{flex: 1;border-left:solid 1px black;border-right: solid 1px black;cursor: pointer;}
        .box li:active{background: #99f}
        .cont div{height: 259px;display: none;}
        .cont .cont1{background: #66f;display: block}
        .cont .cont2{background: #6f6;}
        .cont .cont3{background: #f66;}
        .cont .cont4{background: #ff6;}
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li style="background:red">热门推荐</li>
            <li>限时抢购</li>
            <li>积分兑换</li>
            <li>满减返现</li>
        </ul>
        <div class="cont">
            <div class="cont1">
                一堆各种复杂的页面结构1
            </div>
            <div class="cont2">
                一堆各种复杂的页面结构2
            </div>
            <div class="cont3">
                一堆各种复杂的页面结构3
            </div>
            <div class="cont4">
                一堆各种复杂的页面结构4
            </div>
        </div>
    </div>
</body>
<script>
    var ali = document.querySelectorAll(".box ul li");
    var acont = document.querySelectorAll(".box .cont>div");

    // 给每个li绑定一个索引，方便将来使用
    for(var i=0;i<ali.length;i++){
        ali[i].a = i;
    }
    
    // console.log(ali[0].a)

    // var obj = {}
    // obj.a = 10;
    // console.log(obj.a)

    // 要清除的，上一个元素的索引
    var prev = 0;

    for(var i=0;i<ali.length;i++){
        ali[i].onclick = function(){
            // this就是当前点击的那个li
            // console.log(this === li[?])

            // 取消上一个按钮的样式
            ali[prev].style.background = "none";

            // 隐藏上一个内容
            acont[prev].style.display = "none";

            // 给当前按钮添加样式
            this.style.background = "red";

            // 显示按钮对应的内容
            acont[this.a] = "block";

            // 将当前点击的，设置为下一次的上一个按钮            
            prev = this.a;
        }
    }



</script>
</html>